<template>
	<div class="goods">
		<div class="goods_title">
		   <slot name='title'>新品上线</slot>
		</div>
		<div class="goods_content">
			<div class="goods_item" v-for="(item,index) in datacontent" :key="item.goodsId" @click="goInfo(item.goodsId)">
				<div class="goods_img">
					<img :src="item.goodsCoverImg" alt="">
				</div>
				<slot :goods_item="item">
					<div class="goods_desc">
						<p>{{item.goodsName}}</p>
						<span>{{item.sellingPrice | curreny}}</span>
					</div>
				</slot>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'Goods',
  props:{
	  datacontent:{
		  type:[Array],
		  required: true
	  }
  },
  data(){
	  return{
		  
	  }
  },
  methods:{
	goInfo(goodsId){
		this.$router.replace("/info/"+goodsId);
	}
  }
}
</script>

<style  lang='less' scoped>
	.goods{
		.goods_title{
			text-align: center;
			height:50px;
			font-size:20px;
			background-color: #eee;
			color:#168B8B;
			line-height:50px;
			font-weight: bold;
		}
		.goods_content{
			display: flex;
			background-color: #eee;
			justify-content: space-between;
			align-content: space-between;
			flex-wrap: wrap;
			.goods_item{
				background-color: #fff;
				width:49%;
				margin: 2px 0;
				.goods_img{
					width:90%;
					height: 200px;
					margin:10px 5%;
					img{
						width:100%
					}
				}
				.goods_desc{
					text-align: center;
				}
			}
		}
	}
</style>